<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>注册Harbor House</title>
	<link rel="stylesheet" href="">
	<link rel="stylesheet" href="../css/cssreset.css">
	<link rel="stylesheet" href="../css/login&register.css">
	<link rel="shortcut icon" href="../images/favicon.ico">
	<script src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
	<header>
		<h1></h1>
		<ul>
			<li><a href="../index.html">返回首页</a></li>
			<li>|</li>
			<li><a href="#" target="_blank">客服咨询</a></li>
		</ul>
	</header>
	<main>
		<div class="central">
			<h2></h2>
			<div class="cen_right">
				<ul>
					<li class="newuserli"><div class="newuserbox libefore"></div>新用户注册</li>
				</ul>
				<form action="login.html" class="phoneregister forms">
					<ul>
						<li>
							<input type="text" placeholder="请输入手机号码" class="username">
							<span class="u_span"></span>
							<b id="utip"></b>
						</li>
						<li>
							<input type="password" placeholder="请设置密码" class="password0">
							<span class="p_span"></span>
							<b id="pwtip0"></b>
						</li>
						<li>
							<input type="password" placeholder="请确认密码" class="password1">
							<span class="p_span"></span>
							<b id="pwtip1"></b>
						</li>
						<li>
							<input type="text" placeholder="验证码" class="codenum">
							<b id="ctip"></b>
							<div class="code">
								<img src="../images/captcha.png" alt="">
							</div>
							<div class="change code">
								看不清？<br>
								<a href="#">换一张</a>
							</div>
						</li>
					</ul>
					<p>
						<input type="checkbox" id="pass" checked><label for="pass">我已仔细阅读<a href="#"><<用户服务协议>></a>并同意所有条款</label>
					</p>
					
					<button type="submit" value="注册">注册</button>
				</form>
			</div>
		</div>
	</main>
	<footer>
		<ul>
			<li>
				<p>新手上路</p>
				<a href="#" target="_blank">在线目录</a>
			</li>
			<li>
				<p>帮助中心</p>
				<a href="#" target="_blank">家具保养</a>
			</li>
			<li>
				<p>客户服务</p>
				<a href="#" target="_blank">会员介绍</a>
				<a href="#" target="_blank">全国门店</a>
				<a href="#" target="_blank">软装设计</a>
				<a href="#" target="_blank">会员服务</a>
				<a href="#" target="_blank">客诉受理</a>
			</li>
			<li>
				<p>
					<img src="../images/Wechat.jpg" alt="">关注官方微信
				</p>
				<p class="tweet">
					<img src="../images/tweet.jpg" alt=""><span></span>官方微博	
				</p>
			</li>
			<li>
				<p class="number">400-888-1916</p>
				<form action="">
					<input type="text" class="input">
					<span class="ser"></span>
				</form>
				<ul class="lastul">
					<li>
					<a href="#" target="_blank">
						<span class="vedio"></span>
						<p>Harbor House Life</p>
					</a>
					</li>
					<li>
					<a href="#" target="_blank">
						<span class="design"></span>
						<p class="soft">申请软装设计</p>
						<strong>Design Application</strong>
					</a>
					</li>
				</ul>
			</li>
		</ul>
		<p class="foot foot1">
			<a href="#" target="_blank">关于我们</a>
			<a href="#" target="_blank">品牌新闻 </a>
			<a href="#" target="_blank">招聘信息</a>
			<a href="#" target="_blank">客服中心</a>
			<a href="#" target="_blank">帮助中心</a>
			<a href="#" target="_blank">联系我们</a>
			<a href="#" target="_blank">全国门店</a>
			<a href="#" target="_blank">在线目录</a>
			<a href="#" target="_blank">网站地图</a>
		</p>
		<p class="foot foot2"> Harbor House 安美西石贸易（浙江）有限公司版权所有
			<a href="#" target="_blank">浙ICP备07505498号</a>
		</p>
	</footer>

	<script>

		//forms/input
		$('.forms .username').focus(function(){
			$(this).css('border-color','#ffe592');
			$(this).attr('placeholder','');
			utip.innerHTML="";
		})
		$('.forms .username').blur(function(){
			$(this).css('border-color','#cccccc');
			$(this).attr('placeholder','请输入手机号码');
			utip.innerHTML="";
		})
		$('.forms .password0').focus(function(){
			$(this).css('border-color','#ffe592');
			$(this).attr('placeholder','');
			pwtip0.innerHTML="";
		})
		$('.forms .password0').blur(function(){
			$(this).css('border-color','#cccccc');
			$(this).attr('placeholder','请设置密码');
			pwtip0.innerHTML="";
		})
		$('.forms .password1').focus(function(){
			$(this).css('border-color','#ffe592');
			$(this).attr('placeholder','');
			pwtip1.innerHTML="";
		})
		$('.forms .password1').blur(function(){
			$(this).css('border-color','#cccccc');
			$(this).attr('placeholder','请确认密码');
			pwtip1.innerHTML="";
		})
		$('.forms .codenum').focus(function(){
			$(this).css('border-color','#ffe592');
			$(this).attr('placeholder','');
			ctip.innerHTML="";
		})
		$('.forms .codenum').blur(function(){
			$(this).css('border-color','#cccccc');
			$(this).attr('placeholder','验证码');
			ctip.innerHTML="";
		})

		//input输入情况判断
		// console.log(222222222222);
		$('.forms').submit(function(e){			
			var flag=true;
			var unreg = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
			var psreg = /^[A-Za-z][\d\w]{6,16}$/;
			if($('.password1').val()!=$('.password0').val()){
				flag = false;
				pwtip1.innerHTML="与设置密码不匹配！";
			}else if(!$('.username').val().match(unreg)){
				flag = false;
				utip.innerHTML="手机号码格式有误！";//手机号码有误，其余无误
			}else if(!$('.password0').val().match(psreg)){
				flag = false;
				pwtip0.innerHTML="密码必须以字母开头，长度6-16！";
			}
			// e.preventDefault();
			return flag;
		})

		//forms/button
		$('.forms button').hover(function(){
			$(this).css('background','#4a332a');
		},function(){
			$(this).css('background','#ffe592');
		})

	</script>
</body>
</html>